<template>
    <div class="register">
        <el-form ref="visitForm" :model="visitForm" :rules="registerRules" class="register-form">
            <h3 class="title">欢迎来访</h3>
            <el-form-item prop="custName">
                <el-input v-model="visitForm.custName" type="text" auto-complete="off" placeholder="请输入您的姓名">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>
            <el-form-item prop="mobile">
                <el-input v-model="visitForm.mobile" type="text" auto-complete="off" placeholder="请输入您的手机号码">
                    <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>

            <!-- <el-form-item prop="city" >
                <el-select v-model="city" clearable placeholder="请选择城市" style="width: 100%;">
                    <el-option v-for="item in options" :key="item" :label="item" :value="item">
                    </el-option>
                    <svg-icon slot="prefix" icon-class="position" class="el-input__icon input-icon" />
                </el-select>
            </el-form-item> -->
            <el-form-item prop="empMobile">
                <el-input v-model="visitForm.empMobile" type="text" auto-complete="off" placeholder="请输入顾问手机号">
                    <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
                </el-input>
            </el-form-item>

            <el-form-item style="width:100%;">
                <el-button :loading="loading" type="primary" style="width:100%;" @click="submit">
                    登记
                </el-button>
                <div>
                    <el-checkbox v-model="checked"></el-checkbox>&nbsp;已阅读并同意<span style="color: blue;cursor: pointer;"
                        @click="showTerm">《个人信息使用授权条款》</span>
                </div>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-register-footer">
            <span>Copyright © 2018-2024 goodnice All Rights Reserved.</span>
        </div>
        <el-dialog title="个人信息使用授权条款" :visible.sync="dialogFormVisible" width="100%">
            <h1 style="margin: 10px 0;padding: 0;font-size: 16px;text-align: center;">《个人信息使用授权条款》</h1>
            <p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;本授权书条款是确定客户信息相关权利义务的有效依据，除非违反国家法律、行政法规的强制性规定，始终对客户有法律约束力。
            </p>
            <p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;客户在勾选“同意”之前应仔细阅读本授权书，确保对其内容的含义及相应法律后果已全部知晓并充分理解。</p>
            <p style="font-size:14px;">一、个人信息收集范围</p>
            <p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;需要您主动提供如下个人信息：</p>
            <p style="font-size:14px;">
                &nbsp;&nbsp;&nbsp;&nbsp;包括但不限于姓名、身份证号、手机号、个人征信报告、工作年限、收入情况、房产信息、车产信息、社保及公积金、商业保险情况等上述个人信息。</p>
            <p style="font-size:14px;">二、个人信息使用目的</p>
            <p style="font-size:14px;">
                &nbsp;&nbsp;&nbsp;&nbsp;（一）我们会将您的个人信息作为申请贷款主体的基本情况提供给合法贷款机构，以帮助您的贷款申请通过贷款机构审核，从而获得贷款。</p>
            <p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;（二）您同意我们在撮合服务过程中，免费使用、存储您的个人信息或者提供给第三方机构（个人或者银行或者其他机构）
            </p>
            <p style="font-size:14px;">
                &nbsp;&nbsp;&nbsp;&nbsp;（三）当为您提供服务的贷款撮合服务时，我们或合作方会与您电话核实信息，为保证为您服务的质量，您同意我们或合作方对上述核实电话进行录音</p>

        </el-dialog>
    </div>
</template>

<script>

import { getCity } from "@/api/crmsys/companyInfo";
import { custVisit } from "@/api/crmsys/report/visitRecord";

export default {
    name: "visit",
    data() {
        return {
            checked: false,
            dialogFormVisible: false,
            city: null,
            visitForm: {
                custName: "",
                mobile: "",
                empMobile: ""
            },
            options: null,
            registerRules: {
                custName: [
                    { required: true, trigger: "blur", message: "请输入您的姓名" },
                    { min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, trigger: "blur", message: "请输入您的手机号码" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                empMobile: [
                    { required: true, trigger: "blur", message: "请输入接待顾问的手机号码" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                city: [
                    { required: true, trigger: "blur", message: "请选择城市" }
                ],

            },
            loading: false,
            tenant: '' // 添加 tenant 属性
        };
    },
    created() {
        // this.getCity();
        const urlParams = new URLSearchParams(window.location.search);
        this.tenant = urlParams.get('tenant');
        if (this.tenant==null||this.tenant=='') {
            this.$modal.msgError("链接有误，请重新打开链接！");
        }
    },
    methods: {
        showTerm() {
            this.dialogFormVisible = true;
        },
        getCity() {
            getCity().then(response => {
                console.log(response);
                this.options = response.data;

                this.city = response.data[0];
            })
        },
        submit() {
            this.$refs["visitForm"].validate((valid) => {
                if (valid) {
                    if (this.checked == false) {
                        this.$modal.msgError("请阅读并同意授权条款");
                        return;
                    }
                    this.custVisit();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        }, 
        custVisit() {
            custVisit(this.visitForm,this.tenant).then(response => {
                if (response.data.code == "-1") {
                    this.$modal.msgError(response.data.msg);
                } else {

                    this.$modal.msgSuccess(response.data.msg);
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../../assets/images/login-background.jpg");
    background-size: cover;
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 600px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 38px;

        input {
            height: 38px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.register-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.register-code-img {
    height: 38px;
}
</style>